<template>
  <el-dialog :title="'人员配置'" :close-on-click-modal="false" :visible.sync="visible" width="800px" top="8vh"
             @close="clearDataList()">
    <div class="mb10">
      <el-link icon="el-icon-plus" type="primary" @click="openSelectRyFz" :underline="false">选择人员</el-link>
    </div>
    <!--    @change="querySubRuleHandler(item.fzId,index)"-->
    <div class="avue-crud" style="max-height: 60vh; min-height: 10vh">
      <el-collapse v-model="activeName" v-for="(item,index)  in this.showData" @change="validateCol" :key="index">
        <el-collapse-item :name="index">
          <template slot="title">
            <div><span class="numTip" style="padding:5px 10px;">{{ index + 1 }}</span>分组名称：{{ item.fzName }}
              &nbsp;&nbsp;<el-button type="danger" plain @click="btnDel($event,index)">删除</el-button>
              &nbsp;&nbsp;<span style="color: red">{{item.errMsg}}</span>
            </div>
            <div>
               <span class="flex alignItemsCenter">
                 <span class="ml10">奖惩状态:&nbsp;</span>
                 <div style="width: 100px;">
                   <el-select   v-model="item.jcZt" :key="index" clearable placeholder="请选择">
                    <el-option v-for="lst in jcZtoptions" :key="lst.value" :label="lst.label"
                               :value="lst.value"></el-option>
                   </el-select>
                 </div>
               </span>
          </div>
          </template>

          <div class="flex alignItemsCenter mb10" v-for="(cItem,index1) in item.fzConfig">
            <span class="w100">{{ cItem.jjxName }}&nbsp;</span><span class="ml10">公式：</span>
            <span>
              <el-select v-model="cItem.gsId" placeholder="请选择" clearable @change="elGsChange($event,index,index1)">
                <el-option v-for="(item1,index) in gsOptions " :key="index" :label="item1.label" :value="item1.value">
                </el-option>
              </el-select>
            </span>
            <span class="ml10">金额：</span>
            &nbsp;<el-input-number v-model="cItem.jjJe" :precision="2" :step="1" :min="0" style="width:200px;"></el-input-number>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
      <el-button @click="clearDataList()" type="primary" plain>取消</el-button>
    </span>
    <!--选择人员分组-->
    <Ryfzsz v-if="ryfzszVisible" ref="ryfzsz" @getChildValue="setRyfzStr($event,arguments)"></Ryfzsz>
  </el-dialog>
</template>

<script>
import Ryfzsz from './jiangjinrypfz'
import {getJiangJinBm} from '@/api/admin/dept'
import {getJjDeptJjgtoPrant} from '@/api/admin/sysformula'

export default {
  components: {
    Ryfzsz
  },
  mounted() {
    this.getJiangJinJg();
  },
  data() {
    return {
      visible: false,
      canSubmit: false,
      ryfzszVisible: false,
      deptId: '',
      deptName: '',
      activeName: [],

      gsData: [], //公式List
      gsOptions: [],


      jcZtoptions: [{value: 0, label: '无'},
        {value: 1, label: '有'}],

      showData: [] //最后展示数据
    }
  },
  methods: {
    init() {
      this.visible = true;
      this.canSubmit = true;


    },

    // querySubRuleHandler(e,pid, index) {
    //   e.stopPropagation();
    // },
    //获取奖金管理人机构
    getJiangJinJg() {
      getJiangJinBm().then(res => {
        if (res.data.data != null && res.data.data.length > 0) {
          this.deptId = res.data.data[0].deptId;
          this.deptName = res.data.data[0].name;
          this.refresh();
          this.getGsListOption();
        } else {
          this.$notify.closeAll();
          //this.$notify.error("没有相关负责部门")
          //this.deptName = "无相关负责部门";
        }
      });
    },
    refresh() {
      this.showData = []; //最后展示数据
    },
    //取得公式数组
    getGsListOption() {
      getJjDeptJjgtoPrant({id: this.deptId, gsType: '奖金算法', gsFl: '部门'}).then(res => {
        this.gsData = res.data.data;
        ////console.log(this.gsData);
        this.setGsOptiions();
      })
    },
    //设置公式option
    setGsOptiions() {
      this.gsData.map(item => {
        this.gsOptions.push({
          value: item.id,
          label: item.gsMc
        })
      })
    },
    //设置人员分组
    setRyfzStr(obj, objs) {
      // this.showData = [];
      const cDataNew =this.setShowDataNew(obj, objs[1]);
      this.showData = this.showData.concat(cDataNew);
      //设置展开
      this.activeName = [];
      for(let i=0;i<this.showData.length;i++){
        this.activeName.push(i);
      }
      ////console.log(jjxData);
    },
    //记录是否已选择过
    isDataExist(value){
      let lResult = false;
      this.showData.find(item =>{
        if(item.fzId === value){
          lResult = true;
        }
      })
      return lResult;
    },
    //修改后循环体
    setShowDataNew(fzData,jjxData){
      let lStr = [];
      let lExist;
      //加载外层
      for(let i=0;i<fzData.length;i++){
        lExist = false;
        lExist = this.isDataExist(fzData[i].id);
        if(!lExist){
          lStr.push({
            fzId: fzData[i].id,
            fzName: fzData[i].ryfzMc,
            jcZt: '',
            fzConfig: [],
            errMsg: ''
          })
        }
      }

      // 加载内层
      for (let i = 0; i < lStr.length; i++) {
        for (let j = 0; j < jjxData.length; j++) {
            lStr[i].fzConfig.push({
            jjxId: jjxData[j]["id"].toString(),
            jjxName: jjxData[j]["jjxMc"].toString(),
            gsId: "",
            gsName: "",
            jjJe: 0
          })
        }
      }

      return lStr;
    },
    btnDel(e,index){
      e.stopPropagation();
      this.showData.splice(index,1);
    },
    elGsChange(value,indexD,indexX){
      let lResult = '';
      this.gsOptions.find((item) => {
        if (item.value === value) {
          lResult = item.label;
        }
      })
      this.$set(this.showData[indexD].fzConfig[indexX],"gsName",lResult);
    },
    // 数据校验
    validateCol(index){
      // if(index.length === 0){
      //  //console.log('合上')
      // }else{
      //  //console.log('打开')
      // }
      //暂时不用
    },
    //取得回传数据
    getSelectRy() {
      let lResult = [];
      this.showData.map(item =>{
        lResult.push(item.fzId);
      })
      return lResult.join(',') ;
    },
    openSelectRyFz() {
      this.ryfzszVisible = true;
      this.$nextTick(() => {
        // this.$refs.ryfzsz.init(this.deptId);
        this.$refs.ryfzsz.init(this.deptId,this.getSelectRy());
      })
    },
    //查找未填写项目
    setError(){
      // for(let i=0;i<this.showData.length;i++){
      //   if(this.showData[i].jcZt === ""){
      //     this.$set(this.showData[i],"errMsg","请选择奖惩状态！")
      //     return;
      //   }else{
      //     this.$set(this.showData[i],"errMsg","")
      //   }
      //   for(let j=0;j<this.showData[i].fzConfig.length;j++){
      //     if(this.showData[i]["fzConfig"][j].gsId == ""){
      //       this.$set(this.showData[i],"errMsg","奖金项【"+this.showData[i]["fzConfig"][j].jjxName +"】公式未选择！")
      //       return;
      //     }else {
      //       this.$set(this.showData[i],"errMsg","")
      //     }
      //   }
      // }

      let bSwich = false;
      for(let i=0;i<this.showData.length;i++){
        bSwich = false;
        if(this.showData[i].jcZt === ""){
          this.$set(this.showData[i],"errMsg","请选择奖惩状态！");
          bSwich = true;
          // break;
        }else{
          this.$set(this.showData[i],"errMsg","")
        }

        if(!bSwich){
          for(let j=0;j<this.showData[i].fzConfig.length;j++){
            if(this.showData[i]["fzConfig"][j].gsId == ""){
              this.$set(this.showData[i],"errMsg","奖金项【"+this.showData[i]["fzConfig"][j].jjxName +"】公式未选择！")
              break;
            }else {
              this.$set(this.showData[i],"errMsg","")
            }
          }
        }
      }
    },
    submitError(){
      let lErr = false;

      this.setError();
      for(let i=0;i<this.showData.length;i++){
        if(this.showData[i].errMsg !==""){
          lErr = true;
          break;
        }
      }
      return lErr;
    },
    dataFormSubmit() {

      if(this.submitError()){
        return;
      }

     //console.log(this.showData);
    },
    clearDataList() {

      this.showData = [];
      this.visible = false;
    }
  }
}
</script>

<style scoped>

</style>
